<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
<!--    <script src="/js/58cb2985af.js"></script>-->
<!--    <script src="/js/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<div id="w">
    <div id="middleContent">
        <div id="navSideContent">
            <a href="/categoryForm?categoryId=FISH"><img src="@/assets/fish_icon.gif" /></a>
            <br />Saltwater, Freshwater <br />
            <br/>
            <a href="/categoryForm?categoryId=DOGS"><img src="@/assets/dogs_icon.gif" /></a>
            <br />Various Breeds <br />
            <br/>
            <a href="/categoryForm?categoryId=CATS"><img src="@/assets/cats_icon.gif" /></a>
            <br />Various Breeds, Exotic Varieties <br />
            <br/>
            <a href="/categoryForm?categoryId=REPTILES"><img src="@/assets/reptiles_icon.gif" /></a>
            <br />Lizards, Turtles, Snakes <br />
            <br/>
            <a href="/categoryForm?categoryId=BIRDS"><img src="@/assets/birds_icon.gif" /></a>
            <br />Exotic Varieties
        </div>
        <div id="carouselContent">
            <div class="banner">
                <div class="warp">
                    <div class="item" th:each="category:${session.categoryList}" style="display: none;">
                        <a th:href="@{/categoryForm(categoryId=${category.catid}) }">
                            <img th:src="${category.mainimg}"></a>
                    </div>
                    <!-- 这里修改自己的图片路径 -->
                    <!--                       <div th:each="" class="item"><a href="/categoryForm?categoryId=FISH"><img  src="../images/fish.jpg" /></a></div>-->
                    <!--                       <div class="item"><a href="/categoryForm?categoryId=DOGS"><img src="../images/dog.jpg" /></a></div>-->
                    <!--                       <div class="item"><a href="/categoryForm?categoryId=CATS"><img src="../images/cat.jpg" /></a></div>-->
                    <!--                       <div class="item"><a href="/categoryForm?categoryId=REPTILES"><img src="../images/reptiles.jpg" /></a></div>-->
                    <!--                       <div class="item"><a href="/categoryForm?categoryId=DOGS"><img src="../images/dog.jpg" /></a></div>-->
                    <!--                       <div class="item"><a href="/categoryForm?categoryId=BIRDS"><img src="../images/bird.jpg" /></a></div>-->
                </div>
                <div class="div1">
                    &lt;
                </div>
                <div class="div2 ">
                    &gt;
                </div>
                <!-- 小圆点 -->
                <div class="pagenation">
                    <div th:each="category:${session.categoryList}" th:id=" 'pagenation-' + ${category.catid} " style="display: inline-block;" ></div>
                    <!--                       <div id="pagenation-item0"></div>-->
                    <!--                       <div id="pagenation-item1"></div>-->
                    <!--                       <div id="pagenation-item2"></div>-->
                    <!--                       <div id="pagenation-item3"></div>-->
                    <!--                       <div id="pagenation-item4"></div>-->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var index = 0; //定义初始下标
    var banner = document.getElementsByClassName("banner")[0];
    var itemList = document.getElementsByClassName("item");
    console.log(itemList.length);
    var pagenationList = document.querySelectorAll(".pagenation>div");
    var pagenation = document.querySelector(".pagenation");
    // itemList[0].style.opacity = 1;
    itemList[0].style.display = 'block';
    pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色
    var up = document.getElementsByClassName("div1")[0];
    var next = document.getElementsByClassName("div2")[0];

    //下一张图片（封装方便下面自动播放定时器调用）
    function nextFn() {
        index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图
        for (var i = 0; i < itemList.length; i++) {
            // itemList[i].style.opacity = 0; //图片透明度为0图片隐藏
            itemList[i].style.display = 'none'; //图片透明度为0图片隐藏
            pagenationList[i].style.background = "white " //图片没显现小圆点的颜色为白色
        }
        itemList[index].style.transition = "opacity 1s ease .2s"
        // itemList[index].style.opacity = 1; //图片透明度为1图片显现
        itemList[index].style.display = 'block'; //图片透明度为1图片显现
        pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色
    }
    next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片
    up.onclick = function () { //上一张（点击事件）点击切换上一张图片
        index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图
        for (let i = 0; i < itemList.length; i++) {
            // itemList[i].style.opacity = 0;
            itemList[i].style.display = 'none'; //图片透明度为0图片隐藏
            pagenationList[i].style.background = "white"
        }
        itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果
        // itemList[index].style.opacity = 1;
        itemList[index].style.display = 'block';
        pagenationList[index].style.background = "blue"
    }
    //设置定时器，自动向下播放图片
    var t1 = setInterval(nextFn, 2000)
    banner.onmouseover = function () {
        clearInterval(t1);
    }
    banner.onmouseout = function () {
        t1 = setInterval(nextFn, 2000)
    }
    // 事件委托
    pagenation.onclick = function (event) {
        event = window.event || event
        console.log(event);
        if (event.target.className == "pagenation") {
            console.log("点击的是父元素");
        } else {
            var id = event.target.id;
            var photoIndex = null;
            for (var i = 0; i < pagenationList.length; i++) {
                pagenationList[i].style.background = "white"
                if (id.indexOf(i) >= 0) {
                    photoIndex = i;
                }
            }
            event.target.style.background = "blue"
            index = photoIndex; // 将小圆点对应的下标与图片下标对应
            for (var i = 0; i < itemList.length; i++) {
                // itemList[i].style.opacity = 0;
                itemList[i].style.display = 'none';
            }
            itemList[index].style.transition = "opacity 1s ease .2s"
            // itemList[photoIndex].style.opacity = 1;
            itemList[photoIndex].style.display = 'block';
        }
    }

</script>
<style>
/*轮播*/
.banner {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner .wrap {
    width: 100%;
}

.banner .wrap .item {
    width: 100%;
}
.item img {
    height: 393px;
    vertical-align: top;
    position: absolute;
    top: 0px;
    width: 816px;
    left: 42px;
}
.div1 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translatey(-50%);
    cursor: pointer;
    width: 41px;
    height: 69px;
    font-size: 30px;
    line-height: 70px;
    text-align: center;
    color: #D6D8D4;
    background-color: rgba(0, 0, 0, 0.3);
}
.div2 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translatey(-50%);
    cursor: pointer;
    width: 41px;
    height: 69px;
    font-size: 30px;
    line-height: 70px;
    text-align: center;
    color: #D6D8D4;
    background-color: rgba(0, 0, 0, 0.3);
}
.pagenation {
    position: absolute;
    /* border: 1px solid red; */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    bottom: 40px;
}
.pagenation>div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    margin-right: 10px;
    cursor: pointer;
}
.pagenation>div:last-child {
    margin-right: 0;
}

</style>
</body>
</html>